<template>
	<view class="area-list-container">
		<scroll-view class="scroll-view" scroll-y>
			<view class="area-list" v-if="projectAttendanceConfigList.length != 0">
				<view class="area-item" v-for="(item, index) in projectAttendanceConfigList" :key="index">
					<view class="area-item-left">
						<view class="area-name">{{ item.name }}</view>
						<view class="area-info">
							<text class="person-name" v-if="item.editUserName">{{ item.editUserName || '' }}</text>
							<text class="time">{{ item.editTimeData }}</text>
						</view>
					</view>

					<view class="area-item-right">
						<image :src="editAreaImg" class="icon" @tap="edit" :data-item="item" v-if="hasEditAuth" />
						<image :src="delAreaImg" class="icon" @tap="del" :data-item="item" v-if="hasEditAuth" />
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="common-btns-container" v-if="hasEditAuth">
			<view class="common-btn-container" hover-class="common-btn" @tap="toAddAreaConfig">新增</view>
		</view>
	</view>
</template>

<script>
/**
 * 区域设置
 */
import { common } from '@/pagesA/utils/common.js';
// import editAreaImg from '@/pagesA/assets/image/edit-area.png';
// import delAreaImg from '@/pagesA/assets/image/del-area.png';
import moment from 'moment';
const app = getApp();
export default {
	data() {
		return {
			editAreaImg: common.imgs.editAreaImg,
			delAreaImg: common.imgs.delAreaImg,
			projectAttendanceConfigList: [],
			hasEditAuth: false
		};
	},
	onLoad(options) {},
	onShow() {
		let cisdiOpearList = uni.getStorageSync('cisdiOpearList') || [];
		for (let item of cisdiOpearList) {
			if (item == '20131012') {
				//是否有位置管理权限
				this.hasEditAuth = true;
				break;
			}
		}
		// this.setData({
		// 	hasEditAuth: this.hasEditAuth
		// });
		this.getCheckConfig();
	},
	methods: {
		handleTime(time, format = 'YYYY-MM-DD HH:mm:ss') {
			if (!time) {
				return;
			}
			return moment(time).format(format);
		},

		getCheckConfig() {
			common.apis.mobileAttendance.getCheckConfig().then((res) => {
				this.projectAttendanceConfigList = res.data || [];
				for (let item of this.projectAttendanceConfigList) {
					item.editTimeData = this.handleTime(item.editTime);
				}
				// this.setData({
				// 	projectAttendanceConfigList: this.projectAttendanceConfigList
				// });
			});
		},

		toAddAreaConfig() {
			//新增区域设置
			uni.navigateTo({
				url: '/pagesA/pages/attendance/areaList/editAreaConfig/editAreaConfig'
			});
		},

		edit(e) {
			const item = e.currentTarget.dataset.item;
			app.globalData.isEditLocationInfo = true;
			app.globalData.editLocationInfo = item;
			this.toAddAreaConfig();
		},

		del(e) {
			const item = e.currentTarget.dataset.item;
			uni.showModal({
				title: '温馨提示',
				content: `是否确认删除考勤区【${item.name}】?`,
				complete: (res) => {
					if (res.confirm) {
						uni.showLoading({
							title: '提交中',
							mask: true
						});
						common.apis.mobileAttendance
							.deleteProjectAttendanceConfig({
								uuid: item.uuid
							})
							.then(() => {
								common.message.toast('删除成功');
								this.getCheckConfig();
							});
					}
				}
			});
		}
	}
};
</script>
<style>
@import url('@/pagesA/assets/style/common.css');
.area-list-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f4f6f9;
}

.scroll-view {
	height: 0;
	flex: 1;
}

.area-list {
	background-color: #fff;
	padding: 0 32rpx;
	margin-top: 16rpx;
}

.area-list .area-item {
	padding: 32rpx 0;
	display: flex;
	min-height: 166rpx;
	box-sizing: border-box;
	border-bottom: 1rpx solid #e1e2e7;
}

.area-list .area-item:last-child {
	border-bottom: 0;
}

.area-item-left {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.area-item-left .area-name {
	font-size: 30rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #1e253f;
	word-break: break-all;
}

.area-item-left .area-info {
	display: flex;
	align-items: center;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #949dbf;
}

.area-info .person-name {
	margin-right: 16rpx;
	word-break: break-all;
}

.area-info .time {
	flex-shrink: 0;
}

.area-item-right {
	display: flex;
}

.area-item-right .icon {
	width: 40rpx;
	height: 40rpx;
	margin-left: 40rpx;
}
</style>
